<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>SUNYAHUI&DUANLINA</title>
	<meta name="description" content="A set of modern text styles and hover effects for your inspiration" />
	<meta name="keywords" content="text style, link style, link hover, effect, animation, inspiration, web design" />
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/linkstyles.css" />
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style> /* Firefox seems to have issues loading the clip path from inside the CSS */
		.link--urpi::before {
			-webkit-clip-path: url(#cp_up); 
			clip-path: url(#cp_up);
		}

		.link--urpi::after {
			-webkit-clip-path: url(#cp_down); 
			clip-path: url(#cp_down);
		}
	</style>
</head>

<body>
	
	<div class="container">
		
		<div class="grid">
			<div class="grid__item color-1">
				<a class="link link--kukuri" href="#" data-letters="SUNYAHUI">DUANLINA</a>
			</div>
			<div class="grid__item">
				<a class="link link--takiri" href="#">DUANLINA <span>SUNYAHUI?</span></a>
			</div>
			<div class="grid__item color-2">
				<a class="link link--surinami" href="#"><span data-letters-l="SUNY" data-letters-r="AHUI">DUANLINA</span></a>
			</div>
			<div class="grid__item color-3">
				<a class="link link--nukun" href="#">DU<span>ANLI</span>NA</a>
			</div>
			<div class="grid__item color-4">
				<a class="link link--kumya" href="#"><span data-letters="SUNYAHUI">DUANLINA</span></a>
			</div>
			<div class="grid__item color-8">
				<a class="link link--manko" href="#">DUANLINA<span>one step</span> <span>at a time</span></a>
			</div>
			<div class="grid__item color-11">
				<a class="link link--yaku" href="#">
					<span>SU</span><span>NY</span><span>AH</span><span>UI</span>					
				</a>
			</div>
			<div class="grid__item color-7">
				<a class="link link--mallki" href="#">SUNYAHUI<span data-letters="SUNYAHUI"></span><span data-letters="DUANLINA"></span></a>
			</div>
			<div class="grid__item color-9">
				<a class="link link--ilin" href="#"><span>SUNYAHUI</span><span>DUANLINA</span></a>
			</div>
			
			<div class="grid__item color-5">
				<a class="link link--urpi" href="#" data-letters="DUANLINA">DUANLINA</a>
			</div>
			
		</div>
	</div>

	

</body>

</html>
